import { createLazyFileRoute } from "@tanstack/react-router";
import {  useForm, useFormState } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import classNames from "classnames";
import { useState } from "react";


type LoginUser = {
  username: string;
  password: string;
};

export const Route = createLazyFileRoute("/login")({
  component: Login,
});

function Login() {
  
  const [defaultValues, setDefaultValues] = useState({
    username: "",
    password: "",
  })
  const form = useForm<LoginUser>({defaultValues})

  const formState = useFormState(form);

  const onSubmit = (value: LoginUser) => {
    console.log(value);
    // Handle form submission
  };

  const csbtn = classNames(
    "select-none  bg-blue-950 border-2 ",
    " hover:bg-pink-700 font-bold"
  );
  const container = classNames(
    "border-4 border-black w-2/5 h-3/5 text-black",
    "font-bold flex  bg-gray-300 rounded-lg "
  );

  return (
    <div className="h-dvh bg-blue-950 flex justify-center items-center">
      <main className={container}>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="space-y-8 mx-auto my-auto gap-5 flex flex-col"
          >
            <FormField
              control={form.control}
              name="username"
              render={({ field, }) => (
                <FormItem>
                  <FormControl>
                    <Input
                      placeholder="用户名"
                      {...field}
                      className="w-80"
                    />
                  </FormControl>
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render = {({ field, }) => (
                 <FormItem>
                  <FormControl>
                    <Input
                      placeholder="密码"
                      type="password"
                      {...field}
                      className="w-80"
                    />
                  </FormControl>
                 </FormItem>  
              )}
              />
            <Button
              type="submit"
              className={csbtn}
              disabled={form.formState.isSubmitting}
            >
              {formState.isSubmitting ? "登录中..." : "登录"}
            </Button>
          </form>
        </Form>
      </main>
    </div>
  );
}
